<div data-page="cinemahome" class="page">
    <div class="page-content">
        <div class="list-block media-list" style="margin: 35px 0 12px 0;">
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-media">
                            <img width="80" height="80" onerror="onCinemaPosterError(this)" src="{{cinema_picture}}">
                        </div>
                        <div class="item-inner">
                            <div class="item-title-row" style="padding-bottom: 5px">
                                <div class="item-title">{{cinema_name}}</div>
                                <div class="item-after">
                                    {{#if tag_1}}<div class="chip bg-red" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">1</div></div>{{/if}}
                                    {{#if tag_2}}<div class="chip bg-yellow" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">2</div></div>{{/if}}
                                    {{#if tag_3}}<div class="chip bg-green" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">3</div></div>{{/if}}
                                    {{#if tag_4}}<div class="chip bg-blue" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">4</div></div>{{/if}}
                                    {{#if tag_5}}<div class="chip bg-orange" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">5</div></div>{{/if}}
                                    {{#if tag_6}}<div class="chip bg-gray" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">6</div></div>{{/if}}
                                    {{#if tag_7}}<div class="chip bg-purple" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">7</div></div>{{/if}}
                                    {{#if tag_8}}<div class="chip bg-pink" style="height: 18px;line-height: 18px;font-size: 14px;margin-right: 2px"><div class="chip-label">8</div></div>{{/if}}
                                </div>
                            </div>
                            <div class="item-subtitle" style="padding: 3px 0;vertical-align: top">
                                <img src="{{formatDoughnut score}}" width="85">
                                <span style="display: inline-block;margin-left: 8px">{{formatPerCapita price}}</span>
                            </div>
                            <div class="item-subtitle color-gray" style="padding-top: 5px">
                                <span style="display: inline-block;">{{region_name}}</span>
                                <span style="display: inline-block;float: right">{{formatDistance distance}}</span></div>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-media navigation" data-lat="{{cinema_lat}}" data-lng="{{cinema_long}}" data-name="{{cinema_name}}" data-site="{{cinema_site}}"><i class="icon iconfont icon-location1 color-gray"></i></div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title navigation" data-lat="{{cinema_lat}}" data-lng="{{cinema_long}}" data-name="{{cinema_name}}" data-site="{{cinema_site}}" style="font-weight: 400;font-size: 14px">
                                {{cinema_site}}
                            </div>
                            <div class="item-after">
                                {{#if tel}}
                                    <a class="external" href="tel:{{tel}}"><i class="icon iconfont icon-phone color-custom" style="font-size:large"></i></a>
                                {{else}}
                                    <i class="icon iconfont icon-phone" style="color: gray;font-size:large"></i>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </li>
                {{#if posters}}
                <li class="item-content">
                    <div class="item-inner">
                        <div class="swiper-container swiper-posters">
                            <div class="swiper-wrapper">
                                {{#each posters}}
                                    <div class="swiper-slide" style="text-align: center">
                                        <img style="width: 100%;height: 95px" onerror="onCinemaPosterError(this)" src="{{CINEMA_POSTER cinema_code poster_url}}">
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>
                </li>
                {{/if}}
            </ul>
        </div>
        <a style="border-radius: 27px 0 0 27px;position: absolute;right: 0;top: 185px;z-index: 90"
           class="cinema-collection button button-round button-fill {{#if collection_id}}color-gray{{else}}color-custom{{/if}}" href="#">
            {{#if collection_id}}
                <img class="f7-icons" src="./img/set_movie_collection_w_2.png" width="16px" height="14px" style="vertical-align:middle"/><span style="margin-left: 14px">已收藏</span>
            {{else}}
                <img class="f7-icons" src="./img/set_movie_collection_w_1.png" width="16px" height="14px" style="vertical-align:middle"/><span style="margin-left: 14px">收藏</span>
            {{/if}}
        </a>
        {{#if roomtypes}}
            <div class="content-block-title" style="margin: 12px 15px">预约信息</div>
            <div class="list-block media-list" style="margin: 12px 0">
                <ul>
                {{#each roomtypes}}
                    <li>
                        <a href="cinemaroomtype?roomtype_id={{roomtype_id}}" class="item-link item-content">
                            <div class="item-inner" style="padding-right: 40%">
                                <div>
                                    <div class="item-title-row" style="background-image: none">
                                        <div class="item-title">{{roomtype_name}}</div>
                                    </div>
                                    <div class="item-subtitle">{{#if roomtype_description}}{{roomtype_description}}{{else}}-{{/if}}</div>
                                </div>
                                <div style="font-size: 16px;position: absolute;right: 20%;top: 22px" class="color-custom">{{formatPrice roomtype_price}}</div>
                                <object>
                                    <a href="cinemaroomtype?roomtype_id={{roomtype_id}}"
                                       class="button button-fill color-custom"
                                       style="z-index:100;position: absolute;right: 3%;top: 20px">
                                        预约
                                    </a>
                                </object>
                            </div>
                        </a>
                    </li>
                {{/each}}
                </ul>
            </div>
        {{/if}}
        {{#if movies}}
            <div class="content-block-title" style="margin: 12px 15px">影院片库</div>
            <div class="content-block">
                <div class="content-block-inner">
                    <div class="swiper-container swiper-movies">
                        <div class="swiper-wrapper" style="box-sizing: content-box">
                            {{#each movies}}
                                <div class="swiper-slide" style="text-align: center">
                                    <a href="moviehome?mid={{mid}}&from=cinema&random={{random 1}}">
                                        <img onerror="onMoviePosterError(this)" class="swiper-lazy" style="width:100%;height: 140px" data-src="{{MOVIE_POSTER mid poster}}">
                                        <div class="color-black" style="font-size: 12px;overflow: hidden;height: 20px;line-height: 20px;text-overflow:ellipsis ">{{movie_name}}</div>
                                    </a>
                                    <div class="slik-ribbon">{{formatMovieScore score}}</div>
                                </div>
                            {{/each}}
                            <div class="swiper-slide" style="text-align: center">
                                <a style="width: 100%;height: 138px;display: block;line-height: 140px;background-color: lightblue;"
                                   class="color-custom" href="filtedmovies?mode=4&parameter={{cinema_code}}">查看更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
</div>